import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
let data = [
  {
    category: "Sporting Goods",
    price: "$49.99",
    stocked: true,
    name: "Football",
  },
  {
    category: "Sporting Goods",
    price: "$9.99",
    stocked: true,
    name: "Baseball",
  },
  {
    category: "Sporting Goods",
    price: "$29.99",
    stocked: false,
    name: "Basketball",
  },
  {
    category: "Electronics",
    price: "$99.99",
    stocked: true,
    name: "iPod Touch",
  },
  {
    category: "Electronics",
    price: "$399.99",
    stocked: false,
    name: "iPhone 5",
  },
  { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" },
];
class FilterableProductTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        inText: "",
        isChecked: false,
      },
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    let name = e.target.name;
    let value =
      name === "inText" ? e.target.value : !this.state.formData.isChecked;
    this.setState({
      formData: {
        ...this.state.formData,
        [name]: value,
      },
    });
  }
  render() {
    return (
      <div>
        <SearchBar
          handleChange={this.handleChange}
          formData={this.state.formData}
        />
        <ProductTable formData={this.state.formData} />
      </div>
    );
  }
}
class SearchBar extends React.Component {
  render() {
    let { formData, handleChange } = this.props;
    return (
      <form className="SearchBar">
        <label>
          <input
            type="text"
            placeholder="请输入搜索"
            name="inText"
            value={formData.inText}
            onChange={handleChange}
          />
        </label>
        <label>
          <input
            type="checkbox"
            name="isChecked"
            value={formData.isChecked}
            onChange={handleChange}
          />
          Only show products in stock
        </label>
      </form>
    );
  }
}
class ProductTable extends React.Component {
  render() {
    let { formData } = this.props;
    let lastCategody = null;

    const rows = [];
    data.forEach((ele) => {
      if (ele.name.indexOf(formData.inText) === -1) {
        return;
      }
      if (formData.isChecked && !ele.stocked) {
        return;
      }
      if (ele.category !== lastCategody) {
        rows.push(
          <ProductCategoryRow name={ele.category} key={ele.category} />
        );
        lastCategody = ele.category;
      }
      rows.push(
        <ProductRow
          name={ele.name}
          stocked={ele.stocked}
          price={ele.price}
          key={ele.name}
        />
      );
    });
    return (
      <div className="productTable">
        <div className="title">
          <span>Name</span>
          <span>Price</span>
        </div>
        {rows}
      </div>
    );
  }
}
function ProductCategoryRow(props) {
  return (
    <div className="productCategoryRow">
      <div className="title">
        <span>{props.name}</span>
      </div>
    </div>
  );
}
function ProductRow(props) {
  return (
    <div className="ProductRow">
      <div className="title">
        <span className={props.stocked ? "goodsName" : "goodsEmptyName"}>
          {props.name}
        </span>
        <span className="goodsPrice">{props.price}</span>
      </div>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<FilterableProductTable />);
